import React, { useEffect, useState } from 'react';
import './index.less';
import { Button } from 'antd-mobile';
import {
  // 向下的箭头
  DownOutline,
  // 向上的箭头
  UpOutline,
  // 向右的箭头
  RightOutline,
  // 向左的箭头
  LeftOutline,
} from 'antd-mobile-icons';

export default function Cast() {
  //测试
  const [num, setnum] = useState([1]);
  // 按钮状态
  const [btnStatus, setbtnStatus] = useState(false);
  // 展开状态
  const [showStatus, setshowStatus] = useState(false);

  // 点击展开
  const handelshow = () => {
    if (showStatus) {
      setshowStatus(false);
      setnum([1]);
    } else {
      setshowStatus(true);
      setnum([1, 2, 3, 4, 5, 6, 7]);
    }
  };
  //点击预约
  const handelClick = () => {
    // 切换按钮状态
    setbtnStatus((prev) => !prev);
  };
  return (
    <div className="cast">
      <div className="head">直播</div>
      <div className="casting">
        <div className="casting-head">
          <div>
            <p className="p1">直播课程</p>
          </div>
          <div>
            <p className="p2">更多{'>'}</p>
          </div>
        </div>
        {num.map((item) => (
          <div className="casting-main" key={item}>
            <div className="img">
              <img src="/默认.jpg" alt="" />
            </div>
            <div className="content">
              <div className="content-box">
                <p className="p1">先导预习课第一次</p>
                <p className="p2">
                  时间:&nbsp;<span>5月20日</span>&nbsp;<span>20:00-21:00</span>
                </p>
                <p className="p3">
                  讲师:&nbsp;<span>李老师&nbsp;</span>150<span></span>人已预约
                </p>
              </div>
              <Button
                block
                shape="rounded"
                color="primary"
                className="btn"
                fill="outline"
                disabled={btnStatus}
                onClick={handelClick} //预约点击事件
              >
                {btnStatus ? '已预约' : '立即预约'}
              </Button>
            </div>
          </div>
        ))}
        {/* 展示更多直播课程 */}
        <div className="showAll" onClick={handelshow}>
          {showStatus ? (
            <span>
              收起近期直播 <UpOutline />
            </span>
          ) : (
            <span>
              展开近期直播 <DownOutline />
            </span>
          )}
        </div>
      </div>
      <div>这是一个</div>
    </div>
  );
}
